iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
自我挑戰組

Android Studio、Photoshop入門系列 第 7

Android Studio入門-D7 介紹Layout (1)

  • 分享至 

  • xImage
  •  

前情提要
前面有提到主要面板就是編輯器面板~
今天要來講layout,也就是手機布局的面板設計啦~


layout

首先~我們打開Android Studio
建立或開啟一個project(不會可以參考這篇https://ithelp.ithome.com.tw/articles/10290873)
從左邊的資料夾找到layout的資料夾
點擊activity_main.xml
https://ithelp.ithome.com.tw/upload/images/20220918/20152124cUP9qT4a4E.png
登愣~/images/emoticon/emoticon34.gif
編輯器面板就會出現你的版面啦~
https://ithelp.ithome.com.tw/upload/images/20220918/20152124XnoBbhKSBo.png
這時候就可以來排版了~


"Hello IThome"

嘿嘿~身為一個IT人 當然要來Hello一下啊~/images/emoticon/emoticon07.gif
咦~一進去看到他已經幫我們打好"Hello World!"了/images/emoticon/emoticon01.gif
想必大家也是吧~
沒關係!我們來練習改成"Hello iThome"
點一下Hello World 會看到左邊palette裡的common欄位顯示"Text View"
Component Tree底下的ConstraintLayout有一欄TextView"Hello World!"
https://ithelp.ithome.com.tw/upload/images/20220918/20152124VwRJnOsSto.png
沒錯~/images/emoticon/emoticon12.gif

  • palette可以選擇你想設計的物件形式
  • Component Tree就是負責控制你的物件

接著我們來看右邊的Attibutes
這邊有非常多細項 可以改變物件的屬性
像是ID改變ConstraintLayout的ID
text改變面板顯示的字串
於是~打上去後
https://ithelp.ithome.com.tw/upload/images/20220918/20152124uyMkHUE0Gm.png
就變成這樣啦~~~~
Hello IThome!


明天會介紹更多~ 感謝閱讀/images/emoticon/emoticon51.gif


上一篇
Android Studio入門-D6 認識&功能
下一篇
Android Studio入門-D8 介紹Layout (2)
系列文
Android Studio、Photoshop入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言